<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Elastic Cells</title>
	<link href="../raxan/ui/css/master.css" rel="stylesheet" type="text/css" />
	<!--[if lt IE 8]><link rel="stylesheet" href="../raxan/ui/css/master.ie.css" type="text/css"><![endif]-->
	<link href="../raxan/ui/css/default/theme.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="container e90 tpm">

        <div class="column e20 silver last">
            <h3>20% Column</h3>
        </div>
        <div class="column e80 lightgray last">
            <h3>80% Column</h3>
        </div>

        <hr class="space"/>

        <div class="left e10 lightgray"><h4>10%</h4></div>
        <div class="left e10 silver"><h4>10%</h4></div>
        <div class="left e10 lightgray"><h4>10%</h4></div>
        <div class="left e10 silver"><h4>10%</h4></div>
        <div class="left e10 lightgray"><h4>10%</h4></div>
        <div class="left e10 silver"><h4>10%</h4></div>
        <div class="left e10 lightgray"><h4>10%</h4></div>
        <div class="left e10 silver"><h4>10%</h4></div>
        <div class="left e10 lightgray"><h4>10%</h4></div>
        <div class="left e10 silver"><h4>10%</h4></div>

        <hr class="space"/>

        <div class="e100 r5">
            <div class="column e20 h20 lightgray last"><h4>20% x 20% </h4></div>
            <div class="column e20 h40 silver last"><h4>20% x 40%</h4></div>
            <div class="column e20 h60 lightgray last"><h4>20% x 60%</h4></div>
            <div class="column e20 h80 silver last"><h4>20% x 80%</h4></div>
            <div class="column e20 h100 lightgray last"><h4>20% x 100%</h4></div>
        </div>

        <hr class="space"/>

        <!-- left sidebar -->
        <h2>Layout with left sidebar</h2>
        <div class="column e100 last lightgray">
            <div class="c10 silver left front">
                <h3 class="pad">Sidebar (fixed-width)</h3>
                <p class="ltm">estibulum quam id elit rutrum scelerisque. Nulla euismod dui in tellus. In vel ante. Nullam urna nulla, pellentesque eget, blandit in, dapibus et, lectus. Curabitur suscipit bibendum nisi. Pellentesque felis. Praesent id massa a ligula rutrum pellentesque. Aenean tincidunt elementum arcu. Vivamus eros libero, semper sed, ultricies scelerisque, facilisis eget, erat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fringilla augue eget elit. Integer nec sapien.</p>
            </div>
            <div class="prepend1 append1 scrollable">
                <h2>Dynamic Width</h2>
                <p>Integer ante. Nunc sollicitudin justo sit amet neque. Suspendisse potenti. Nunc sem sapien, accumsan euismod, consectetuer nec, commodo vestibulum, turpis. Vestibulum eget dui. Praesent rutrum, massa non varius egestas, lectus diam congue nulla, vitae euismod massa eros non diam. Fusce nec libero tempor erat sagittis condimentum. In lacinia quam sit amet eros. Ut arcu lacus, auctor et, volutpat eget, posuere quis, dui. Aliquam libero.</p>
                <p>Aenean scelerisque hendrerit leo. Nam mollis mi non turpis. Aliquam nec augue non augue euismod aliquam. Proin auctor ultricies urna. Quisque sollicitudin. Ut consequat varius augue. Etiam orci tellus, cursus vitae, sollicitudin nec, condimentum ut, ante. Mauris sed ipsum a lectus fermentum semper. Donec tempus mi quis lorem. Integer luctus massa. Ut purus nisi, rutrum in, tempor vitae, scelerisque nec, justo. In hac habitasse platea dictumst. Mauris est. Sed molestie. Quisque congue consequat ligula. Suspendisse potenti. Maecenas in velit sed lorem lacinia cursus. Pellentesque vel urna. Morbi eleifend nulla non enim. </p>
                <p>estibulum quam id elit rutrum scelerisque. Nulla euismod dui in tellus. In vel ante. Nullam urna nulla, pellentesque eget, blandit in, dapibus et, lectus. Curabitur suscipit bibendum nisi. Pellentesque felis. Praesent id massa a ligula rutrum pellentesque. Aenean tincidunt elementum arcu. Vivamus eros libero, semper sed, ultricies scelerisque, facilisis eget, erat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fringilla augue eget elit. Integer nec sapien.</p>
            </div>
        </div>

        <hr class="space" />

        <!-- right sidebar -->
        <h2>Layout with right sidebar</h2>
        <div class="column e100 last lightgray">
            <div class="c10 h100 silver right ">
                <h3 class="pad">Sidebar (fixed-width)</h3>
                <p class="ltm">estibulum quam id elit rutrum scelerisque. Nulla euismod dui in tellus. In vel ante. Nullam urna nulla, pellentesque eget, blandit in, dapibus et, lectus. Curabitur suscipit bibendum nisi. Pellentesque felis. Praesent id massa a ligula rutrum pellentesque. Aenean tincidunt elementum arcu. Vivamus eros libero, semper sed, ultricies scelerisque, facilisis eget, erat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fringilla augue eget elit. Integer nec sapien.</p>
            </div>
            <div class="elastic prepend1 append1 scrollable">
                <h2>Dynamic Width</h2>
                <p>Aenean scelerisque hendrerit leo. Nam mollis mi non turpis. Aliquam nec augue non augue euismod aliquam. Proin auctor ultricies urna. Quisque sollicitudin. Ut consequat varius augue. Etiam orci tellus, cursus vitae, sollicitudin nec, condimentum ut, ante. Mauris sed ipsum a lectus fermentum semper. Donec tempus mi quis lorem. Integer luctus massa. Ut purus nisi, rutrum in, tempor vitae, scelerisque nec, justo. In hac habitasse platea dictumst. Mauris est. Sed molestie. Quisque congue consequat ligula. Suspendisse potenti. Maecenas in velit sed lorem lacinia cursus. Pellentesque vel urna. Morbi eleifend nulla non enim. </p>
                <p>estibulum quam id elit rutrum scelerisque. Nulla euismod dui in tellus. In vel ante. Nullam urna nulla, pellentesque eget, blandit in, dapibus et, lectus. Curabitur suscipit bibendum nisi. Pellentesque felis. Praesent id massa a ligula rutrum pellentesque. Aenean tincidunt elementum arcu. Vivamus eros libero, semper sed, ultricies scelerisque, facilisis eget, erat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fringilla augue eget elit. Integer nec sapien.</p>
                <p>Integer ante. Nunc sollicitudin justo sit amet neque. Suspendisse potenti. Nunc sem sapien, accumsan euismod, consectetuer nec, commodo vestibulum, turpis. Vestibulum eget dui. Praesent rutrum, massa non varius egestas, lectus diam congue nulla, vitae euismod massa eros non diam. Fusce nec libero tempor erat sagittis condimentum. In lacinia quam sit amet eros. Ut arcu lacus, auctor et, volutpat eget, posuere quis, dui. Aliquam libero.</p>
            </div>
        </div>

        <hr class="space" />

        <!-- two sidebars -->
        <h2>Layout with both left &amp; right sidebars</h2>
        <div class="column e100 last lightgray">
            <div class="c10 h100 silver left front">
                <h3 class="pad">Sidebar (fixed-width)</h3>
                <p class="ltm">estibulum quam id elit rutrum scelerisque. Nulla euismod dui in tellus. In vel ante. Nullam urna nulla, pellentesque eget, blandit in, dapibus et, lectus. Curabitur suscipit bibendum nisi. Pellentesque felis. Praesent id massa a ligula rutrum pellentesque. Aenean tincidunt elementum arcu. Vivamus eros libero, semper sed, ultricies scelerisque, facilisis eget, erat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fringilla augue eget elit. Integer nec sapien.</p>
            </div>
            <div class="c10 h100 silver right front ">
                <h3 class="pad">Sidebar (fixed-width)</h3>
                <p class="ltm">estibulum quam id elit rutrum scelerisque. Nulla euismod dui in tellus. In vel ante. Nullam urna nulla, pellentesque eget, blandit in, dapibus et, lectus. Curabitur suscipit bibendum nisi. Pellentesque felis. Praesent id massa a ligula rutrum pellentesque. Aenean tincidunt elementum arcu. Vivamus eros libero, semper sed, ultricies scelerisque, facilisis eget, erat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fringilla augue eget elit. Integer nec sapien.</p>
            </div>
            <div class="elastic prepend1 append1 scrollable">
                <h2>Dynamic Width</h2>
                <p>Aenean scelerisque hendrerit leo. Nam mollis mi non turpis. Aliquam nec augue non augue euismod aliquam. Proin auctor ultricies urna. Quisque sollicitudin. Ut consequat varius augue. Etiam orci tellus, cursus vitae, sollicitudin nec, condimentum ut, ante. Mauris sed ipsum a lectus fermentum semper. Donec tempus mi quis lorem. Integer luctus massa. Ut purus nisi, rutrum in, tempor vitae, scelerisque nec, justo. In hac habitasse platea dictumst. Mauris est. Sed molestie. Quisque congue consequat ligula. Suspendisse potenti. Maecenas in velit sed lorem lacinia cursus. Pellentesque vel urna. Morbi eleifend nulla non enim. </p>
                <p>estibulum quam id elit rutrum scelerisque. Nulla euismod dui in tellus. In vel ante. Nullam urna nulla, pellentesque eget, blandit in, dapibus et, lectus. Curabitur suscipit bibendum nisi. Pellentesque felis. Praesent id massa a ligula rutrum pellentesque. Aenean tincidunt elementum arcu. Vivamus eros libero, semper sed, ultricies scelerisque, facilisis eget, erat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fringilla augue eget elit. Integer nec sapien.</p>
            </div>
        </div>

        <hr class="space" />

    </div>
</body>

</html>